<template>
  <div class="content_card">
    <UHeader>
      <template slot="left">
        <el-input
          size="small"
          style="width: 200px"
          placeholder="请输入内容">
          <i slot="prefix" class="el-input__icon el-icon-search"/>
        </el-input>
        <StatusTab :datas="statusData" />
      </template>
      <div slot="right">
        <el-button type="success" size="mini" @click="showDialog=true">添加</el-button>
        <el-dropdown @command="batchApply">
          <el-button type="danger" size="mini">
            批量操作<i class="el-icon-arrow-down el-icon--right"/>
          </el-button>
          <el-dropdown-menu slot="dropdown" :split-button="true">
            <el-dropdown-item command="1">禁用</el-dropdown-item>
            <el-dropdown-item command="0">解封</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </div>
    </UHeader>
    <UTable ref="mTable" :search-api="getAllCysForPage" :delete-api="delCys" :config="config" :columns="columns" :search-params="searchParams" @onHandleClick="onHandleClick" />

    <el-dialog :visible.sync="showDialog" :append-to-body="true" title="添加承认商" width="500px">
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="承运商名称">
          <el-input v-model="editForm.name" autocomplete="off" placeholder="请输入承运商名称"/>
        </el-form-item>
        <el-form-item label="企业名称">
          <el-input v-model="editForm.enterpriseName" autocomplete="off" placeholder="请输入企业名称"/>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="editForm.phone" autocomplete="off" placeholder="请输入联系电话"/>
        </el-form-item>
        <el-form-item label="佣金%">
          <el-input v-model="editForm.scale" autocomplete="off" placeholder="请输入佣金"/>
        </el-form-item>
        <el-form-item label="地区">
          <AreaSelect :value.sync="editForm.area" placeholder="请选择地区" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button :loading="isSaveLoadin" type="primary" @click="saveCys">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>
import UHeader from '@/components/UHeader'
import UTable from '@/components/UTable'
import { baseTableConfig } from '@/utils/baseConfig'
import AreaSelect from '@/components/AreaSelect'
import StatusTab from '@/components/StatusTab'
import { getAllCysForPage, delCys, addCys, doSwitchCysUse } from '@/api/cys'
import columns from './columns'
export default {
  components: {
    UTable, AreaSelect, StatusTab, UHeader
  },
  data() {
    return {
      getAllCysForPage: getAllCysForPage,
      delCys: delCys,
      config: baseTableConfig,
      columns: columns,
      showDialog: false,
      isSaveLoadin: false,
      searchParams: {

      },
      statusData: [{ value: '', label: '全部' }, { value: 0, label: '启用' }, { value: -1, label: '禁用' }],
      editForm: {
        area: '',
        name: '',
        enterpriseName: '',
        phone: ''
      }
    }
  },
  methods: {
    onHandleClick(butIndex, row, rowIndex) {
      if (butIndex !== 0) {
        doSwitchCysUse(row.id).then(res => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.$refs.mTable.refresh()
        })
      }
    },
    saveCys() {
      this.isSaveLoadin = true
      addCys(this.editForm).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.isSaveLoadin = false
        this.showDialog = false
        this.$refs.mTable.refresh()
      })
        .catch(_ => {
          this.isSaveLoadin = false
        })
    },
    /**
     * 批量审核
     */
    batchApply(type) {
      this.$message.error('该功能暂未开放')
    }
  }
}
</script>

